<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
</head>

<style>
  span {
    position: relative;
  }
</style>

<body>
  <form action="">
    用户：<input type="text" id="iptUser"><br />
    <br />
    密码：<input type="password" id="iptPswr"><br />
    <br />
    <button type="button">登录</button>
  </form>
</body>
<script>
  let but = document.querySelector('button')
  let userName = document.getElementById('iptUser')
  let passWord = document.getElementById('iptPswr')
  but.onclick = function (e) {
    if ((/^w+$/).test(userName.value) == false || userName.value.length > 5) {
      warn()
    }
    if ((/[^[A-Z]{1,}[0-9]+\w{1,}$]/).test(passWord.value) == null || passWord.value.length < 8) {
      warn()
    }
  }
  function warn() {
    var spantp = document.createElement('span')
    var spText = document.createTextNode('输入错误')
    spantp.appendChild(spText)
    spantp.style.backgroundColor = 'red'
    spantp.style.left = '220px'
    spantp.style.top = '-127px'
    document.body.appendChild(spantp)
    console.log(spantp.style)
  }
</script>

</html>